<template>
	<view class="content">
		<view class="fb_main">
			<view class="fb_title">问题的种类</view>
			<view class="fb_tips">
				<text>功能建议</text>
				<text>购买遇到问题</text>
				<text>性能问题</text>
				<text>其他</text>
			</view>
			<view class="fb_content">
				<textarea :show-confirm-bar="false" :value="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"> </textarea>
				<view class="fb_tool">
					<button @click="handleChooseImg">+</button>

					<view class="up_img_item" v-for="(item,index) in chooseImgs" :key="index" @click="handleRemoveImg"
						:data-index="index">
						<!-- <UpImg :src="item"></UpImg> -->
						<view class="up_img_wrap">
							<image :src="item" mode="aspectFit"></image>
							<icon type="clear" size="23" color="red"></icon>
						</view>

					</view>

				</view>
			</view>
			<view class="form_btn_wrap">
				<button @click="handleFormSubmit" type="warn">
					<icon class="iconn" type="success_no_circle" size="23" color="white">
					</icon>
					提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 被选中的图片路径 数组
				chooseImgs: [],
				// 文本域的内容
				textVal: "",
				BaseUrl: '',
				token: ''
			}
		},
		onLoad() {
			this.BaseUrl = getApp().globalData.BaseUrl
			this.token = uni.getStorageSync('token')
		},
		onShareTimeline() {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		onShareAppMessage: function(e) {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		methods: {
			// 点击 “+” 选择图片
			handleChooseImg() {
				// 2 调用小程序内置的选择图片api
				uni.chooseImage({
					// 同时选中的图片的数量
					count: 9,
					// 图片的格式  原图  压缩
					sizeType: ['original', 'compressed'],
					// 图片的来源  相册  照相机
					sourceType: ['album', 'camera'],
					success: (result) => {
						result.tempFilePaths.forEach(item=>{
							wx.compressImage({
								src: item,
								quality: 20,
								success: (ress) => {
									// console.log("resss",ress)
									this.chooseImgs.push(ress.tempFilePath)
								}
							})
						})
						
					}
				});
			},
			// 点击 自定义图片组件
			handleRemoveImg(e) {
				// 2 获取被点击的组件的索引
				// console.log(e)
				const {
					index
				} = e.currentTarget.dataset;
				// 3 获取data中的图片数组
				let {
					chooseImgs
				} = this;
				// 4 删除元素
				chooseImgs.splice(index, 1);
				this.chooseImgs = chooseImgs
			},
			// 文本域的输入的事件
			handleTextInput(e) {
				this.textVal = e.detail.value;
			},
			// 提交按钮的点击
			handleFormSubmit() {
				// 1 获取文本域的内容 图片数组
				const {
					textVal,
					chooseImgs
				} = this;
				// // console.log(textVal)
				// 2 合法性的验证
				if (!textVal.trim()) {
					// 不合法
					wx.showToast({
						title: '输入不合法',
						icon: 'none',
						mask: true
					});
					return;
				}
				uni.showLoading({
					title: "正在上传中",
					mask: true
				});
				let mes = this.textVal
				uni.request({
					url: this.BaseUrl + '/feedback/addMessage',
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					},
					data: {
						message: mes
					},
					success: (res) => {
						// console.log(res)
						let feedbackId = res.data.data
						// 判断有没有需要上传的图片数组
						if (chooseImgs.length != 0) {
							chooseImgs.forEach((v, i) => {
								uni.uploadFile({
									url: this.BaseUrl + '/feedback/addImage',
									filePath: v,
									name: "file",
									header: {
										"Content-Type": "multipart/form-data",
										'token': this.token
									},
									formData: {
										feedbackId: feedbackId
									},
									success: (resss) => {
										let ress = JSON.parse(resss.data)
										if (ress.code === 200) {
											uni.showToast({
												title: "上传成功",
											})
											if (i === chooseImgs.length - 1) {
												// console.log("把文本的内容和外网的图片数组 提交到后台中");
												this.chooseImgs = []
												this.textVal = ''
												setTimeout(()=>{
													uni.hideLoading();
													uni.navigateBack({
														delta: 1
													});
												},2000)
											}
										} else {
											uni.showToast({
												title: "上传失败",
												icon: "error"
											})
										}
									}
								})
							})
						} else {
							uni.hideLoading();
							// console.log("只是提交了文本");
							
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								});
							},2000)
						}
					}
				})
			}
		},
	}
</script>

<style scoped>
	.up_img_wrap {
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}

	.up_img_wrap image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.up_img_wrap icon {
		position: absolute;
		top: -22rpx;
		right: -22rpx;
	}

	.content {
		/* height: 100%; */
		background-color: #eeeeee;
	}

	.fb_main {
		padding: 20rpx;
		color: #666;
	}

	.fb_main .fb_tips {
		display: flex;
		flex-wrap: wrap;
	}

	.fb_main .fb_tips text {
		width: 30%;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		margin: 20rpx 10rpx;
	}

	.fb_main .fb_content {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.fb_main .fb_content textarea {
		padding: 10rpx;
	}

	.fb_main .fb_tool {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;
	}

	.fb_main .fb_tool button {
		margin: 0;
		width: 90rpx;
		height: 90rpx;
		font-size: 60rpx;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		margin-top: 20rpx;
		color: #ccc;
	}

	.fb_main .fb_tool .up_img_item {
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.fb_main .form_btn_wrap {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.fb_main .form_btn_wrap button {
		margin: 0;
		width: 30%;
	}

	.fb_main .form_btn_wrap .iconn {
		position: relative;
		top: 12upx;
		right: 12upx;
	}
</style>
